<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <div class="topTitleBox">
          <el-col :xl="16" :lg="14" :md="8" :sm="8"
            ><div class="leftBox">
              <div>
                <i class="icon iconfont iconfanhui1" @click="goBack"></i
                >&nbsp;{{ name }}
              </div>
            </div></el-col
          >
          <el-col :xl="8" :lg="10" :md="16" :sm="16">
            <div class="rightBox">
              <el-row type="flex" justify="end">
                <el-col :span="8"
                  ><h3>
                    总分：<span class="mainColor">{{ score }}分</span>
                  </h3></el-col
                >
                <el-col :span="8"
                  ><h3>
                    总考核项：<span class="mainColor">{{ total }}项</span>
                  </h3></el-col
                >
                <el-col :span="8"
                  ><el-button
                    class="commonBut saveBtn funComBut fr"
                    icon="icon iconfont icontianjia"
                    @click="toAdd()"
                    v-if="status == 0 && isThisLevel == 1 && isShowAdd"
                  >
                    <span class="opetareText">新增事项</span>
                  </el-button></el-col
                >
              </el-row>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          prop="typeName"
          label="类别"
          align="left"
          min-width="160"
          :formatter="formatTd"
        ></el-table-column>
        <!-- <el-table-column prop="itemName" label="考核项目" align="center" :formatter=formatTd></el-table-column> -->
        <el-table-column prop="itemName" label="考核项目" min-width="160">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.itemName"
              :columnName="'itemName'"
            ></copyText>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="content" label="考核事项" align="center" :show-overflow-tooltip="true"></el-table-column>  -->
        <el-table-column prop="content" label="考核事项" min-width="160">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.content"
              :columnName="'content'"
            ></copyText>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="illustration" label="标准说明" align="center" ></el-table-column> -->
        <el-table-column prop="illustration" label="标准说明" min-width="260">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.illustration"
              :columnName="'illustration'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column label="标准分值" align="center">
          <template slot-scope="scope"> {{ scope.row.score }}分 </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          :formatter="formatTd"
          width="230"
          v-if="status == 0 && isThisLevel == 1"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="toModify(scope.$index, scope.row)"
              v-show="isShowUpdate"
              >修改</el-link
            >
            <el-link
              type="primary"
              @click="toDelete(scope.$index, scope.row)"
              v-show="isShowDel"
              >移除</el-link
            >
            <el-link
              type="primary"
              @click="toUp(scope.$index, scope.row)"
              v-show="isShowUpdate"
              >上移</el-link
            >
            <el-link
              type="primary"
              @click="toDown(scope.$index, scope.row)"
              v-show="isShowUpdate"
              >下移</el-link
            >
            <span v-show="!isShowUpdate && !isShowDel">--</span>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
    </div>

    <!--新增或修改-->
    <el-dialog
      :title="title"
      :visible.sync="addModifyDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
      class="oneColumnDialog"
    >
      <el-form
        :model="formData"
        label-width="120px"
        :rules="formRules"
        ref="formData"
        class="modifyForm"
      >
        <el-form-item label="考核类别：" prop="typeName">
          <el-input v-model.trim="formData.typeName" clearable></el-input>
        </el-form-item>
        <el-form-item label="考核项目：" prop="itemName">
          <el-input
            type="textarea"
            v-model.trim="formData.itemName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="考核事项：" prop="content">
          <el-input
            type="textarea"
            v-model.trim="formData.content"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="标准说明：" prop="illustration">
          <el-input
            type="textarea"
            v-model.trim="formData.illustration"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="标准分值：" prop="score" class="standardScore">
          <el-input v-model.trim="formData.score" clearable></el-input>&nbsp;分
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm" class="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="saveInfo"
          :disabled="saveInfoEnable"
          class="save"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'checkTemplateDetailTwo',
  components: {},
  data() {
    var checkScore = (rule, value, callback) => {
      var score = this.formData.score
      if (!score) {
        return callback(new Error('标准分值不能为空'))
      } else if (score === '0.0') {
        callback(new Error('标准分值必须大于0'))
      } else {
        var rePayTotal = /^(([1-9][0-9]*)|(([0]\.\d{1}|[1-9][0-9]*\.\d{1})))$/

        if (!rePayTotal.test(value)) {
          callback(new Error('标准分值不能为空,必须大于0,最多有1位小数'))
        } else {
          callback()
        }
      }
    }

    return {
      saveInfoEnable: false,
      toDeleteEnable: false,
      toUpEnable: false,
      toDownEnable: false,
      id: '',
      name: '',
      status: 0,
      isThisLevel: 0,
      score: '',
      total: '',
      addModifyDialog: false,
      title: '新增事项',
      //表格数据
      tableList: [],
      //假造数据
      formData: {
        id: '',
        typeName: '',
        itemName: '',
        content: '',
        illustration: '',
        score: '',
      },
      formRules: {
        typeName: [
          { required: true, message: '考核类别不能为空', trigger: 'blur' },
        ],
        itemName: [
          { required: true, message: '考核项目不能为空', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '考核事项不能为空', trigger: 'blur' },
        ],
        score: [{ required: true, validator: checkScore, trigger: 'blur' }],
        illustration: [
          { required: true, message: '标准说明不能为空', trigger: 'blur' },
        ],
      },
      requestUrl: 'api-r/rightsaccident/expand/list',
      isShow: false, //列表加载
      // loading: true,
      loading: false,
      filterField: {
        category: '',
        project: '',
      },
      isShowUpdate: '',
      isShowAdd: '',
      isShowDel: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    this.name = this.$route.query.name
    this.status = this.$route.query.status
    this.isThisLevel = this.$route.query.isThisLevel
    this.getDetail(this.id)
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:update') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:add') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('checkTemplate:delete') > -1
  },
  activated() {
    // this.formData.id=rowData.id;
    // this.formData.typeName=rowData.typeName;
    // this.formData.itemName=rowData.itemName;
    // this.formData.content=rowData.content;
    // this.formData.illustration=rowData.illustration;
    // this.formData.score=rowData.score;
  },
  methods: {
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplatedetail/expand/templatedetail',
        data: {
          templateId: id,
        },
      })
        .then((response) => {
          this.tableList = response.data.result.templateDetailList
          if (this.tableList.length < 1) {
            this.isShow = true
          }
          this.score = response.data.result.score
          this.total = response.data.result.total
        })
        .catch((error) => {})
    },
    goBack() {
      this.$router.push('/home/checkAffairs/checkTemplate')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/checkAffairs/checkTemplate',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    searchList() {},
    toModify(index, rowData) {
      this.saveInfoEnable = false
      this.addModifyDialog = true
      this.title = '修改事项'

      this.formData.id = rowData.id
      this.formData.typeName = rowData.typeName
      this.formData.itemName = rowData.itemName
      this.formData.content = rowData.content
      this.formData.illustration = rowData.illustration
      this.formData.score = rowData.score
    },
    toDelete(index, rowData) {
      this.toDeleteEnable = true
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplatedetail/expand/deleteitem',
        data: { id: rowData.id, templateId: this.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '删除成功',
            })
            this.getDetail(this.id)
            this.$refs['formData'].resetFields()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.toDeleteEnable = false
          }
        })
        .catch((error) => {})
    },
    toUp(index, rowData) {
      this.toUpEnable = true
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplatedetail/expand/upmove',
        data: { id: rowData.id, templateId: this.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '上移成功',
            })
            this.getDetail(this.id)
            this.$refs['formData'].resetFields()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.toUpEnable = false
          }
        })
        .catch((error) => {})
    },
    toDown(index, rowData) {
      this.toDownEnable = true
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplatedetail/expand/downmove',
        data: { id: rowData.id, templateId: this.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '下移成功',
            })
            this.getDetail(this.id)
            this.$refs['formData'].resetFields()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.toDownEnable = false
          }
        })
        .catch((error) => {})
    },
    toAdd() {
      this.addModifyDialog = true
      this.saveInfoEnable = false
      this.title = '新增事项'

      this.formData.id = ''
      this.formData.typeName = ''
      this.formData.itemName = ''
      this.formData.content = ''
      this.formData.illustration = ''
      this.formData.score = ''
    },
    saveInfo() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.saveInfoEnable = true
          this.addModifyDialog = false

          var url = '',
            dataParas = {}
          if (this.formData.id === '') {
            url = 'api-gov/assesstemplatedetail/expand/createitem'
            dataParas = {
              templateId: this.id,
              typeName: this.formData.typeName,
              itemName: this.formData.itemName,
              content: this.formData.content,
              illustration: this.formData.illustration,
              score: this.formData.score,
            }
          } else {
            url = 'api-gov/assesstemplatedetail/expand/modifyitem'
            dataParas = {
              id: this.formData.id,
              templateId: this.id,
              typeName: this.formData.typeName,
              itemName: this.formData.itemName,
              content: this.formData.content,
              illustration: this.formData.illustration,
              score: this.formData.score,
            }
          }
          this.axios({
            method: 'post',
            url: url,
            data: dataParas,
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                this.getDetail(this.id)
                this.$refs['formData'].resetFields()
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
                this.saveInfoEnable = false
              }
            })
            .catch((error) => {})
        } else {
        }
      })
    },
    cancelForm() {
      this.$refs['formData'].resetFields()
      this.addModifyDialog = false
    },
  },
}
</script>

<style scoped lang="less">
//   .container{
//     padding: 24px;
//   }
.mainColor {
  color: #5fab2c;
}

.topTitle {
  // background-color: #e4ebf1;
  height: 50px;
  line-height: 50px;
  padding: 0 24px;
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .leftBox {
    left: #333;
  }
  .rightBox {
    text-align: right;
    h3 {
      color: #333;
      font-size: 16px;
    }
  }
  .saveBtn {
    margin: 7px 0 0 0 !important;
  }
  .topTitleBox {
    height: 50px;
    width: 100%;
    position: relative;
    &:after {
      width: calc(100% + 48px);
      height: 1px;
      position: absolute;
      right: 0;
      top: 50px;
      left: -24px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
  }
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 67px);
  overflow-y: auto;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
.modifyForm {
  .standardScore {
    /deep/ .el-input {
      width: 30%;
    }
  }
}
</style>
<style>
.el-tooltip__popper {
  max-width: 30% !important;
  word-break: break-all;
}
</style>
